<template>
  <div class="pagebg">
    <h1>项目管理</h1>
    <!-- 输入框 -->
    <div class="searchbox">
      <div>
        <el-input
          style="width: 240px; margin-right: 20px"
          v-model="mneuName"
          placeholder="请输入项目名称"
          :suffix-icon="Search"
          @input="searchinp"
        />
        <el-button @click="chongzhi">重置</el-button>
      </div>
      <!-- 新增按钮 -->
      <div>
        <el-button type="danger" class="btnStyle" @click="recycle"
          >回收站
          <el-tag
            type="danger"
            class="mx-1"
            effect="dark"
            round
            style="
              position: absolute;
              right: -16px;
              top: -10px;
              border: 1px solid #ffffff;
            "
            size="small"
          >
            {{ tableDatalens }}
          </el-tag>
        </el-button>
        <el-button type="primary" @click="addon" color="#2E71D5"
          >新增</el-button
        >
      </div>
    </div>
    <!-- 表格区域 -->
    <div>
      <el-table
        :data="
          tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
        "
        border
        stripe
        style="width: 100%"
        :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }"
        v-loading="loading"
        show-overflow-tooltip
      >
        <el-table-column prop="id" label="序号" width="60" />
        <el-table-column prop="title" label="项目名称" />
        <el-table-column prop="companyid" label="公司标识" />
        <el-table-column prop="account" label="公司名称" />
        <el-table-column prop="address" label="项目地址" />
        <el-table-column prop="start_time" label="开始时间" />
        <el-table-column prop="end_time" label="结束时间" />
        <el-table-column label="操作" width="220">
          <template v-slot="scope">
            <el-button type="primary" @click="editbox(scope.row.id)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              @click="delbox(scope.row.id, scope.row.title)"
              >下架</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pageBox">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 50]"
        :small="small"
        :disabled="disabled"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableDatalen"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- -----------------------------------新增弹窗-------------------------------------- -->
    <el-dialog
      v-model="dialogFormVisible"
      title="新增项目"
      :close-on-click-modal="false"
    >
      <el-form
        :model="itemData"
        label-position="right"
        label-width="120px"
        :rules="rules"
        ref="ruleFormRef"
      >
        <el-form-item label="项目所属公司">
          <el-select
            v-model="itemData.companyid"
            placeholder="请选择项目所属公司"
            style="width: 100%"
          >
            <el-option
              v-for="item in companylist"
              :key="item.id"
              :label="item.account"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="项目名称" prop="title">
          <el-input
            v-model="itemData.title"
            autocomplete="off"
            placeholder="请输入项目名称,例:人力资源项目-A"
          />
        </el-form-item>

        <el-form-item label="项目地址" prop="address">
          <el-input
            v-model="itemData.address"
            autocomplete="off"
            placeholder="请输入项目地址"
          />
        </el-form-item>

        <el-form-item label="项目周期" prop="time">
          <el-date-picker
            v-model="itemData.time"
            type="daterange"
            range-separator="-"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </el-form-item>
        <div class="accountbox">
          <el-form-item label="操作员账号" prop="accOne" class="accinp">
            <el-input
              v-model="itemData.accOne"
              autocomplete="off"
              placeholder="请输入操作员账号"
            />
          </el-form-item>
          <el-form-item label="操作员密码" prop="pasOne" class="accinp">
            <el-input
              v-model="itemData.pasOne"
              autocomplete="off"
              placeholder="请输入操作员密码"
            />
          </el-form-item>
          <el-form-item label="项目会计账号" prop="accTwo" class="accinp">
            <el-input
              v-model="itemData.accTwo"
              autocomplete="off"
              placeholder="请输入项目会计账号"
            />
          </el-form-item>
          <el-form-item label="项目会计密码" prop="pasTwo" class="accinp">
            <el-input
              v-model="itemData.pasTwo"
              autocomplete="off"
              placeholder="请输入项目会计密码"
            />
          </el-form-item>
          <el-form-item label="项目经理账号" prop="accThr" class="accinp">
            <el-input
              v-model="itemData.accThr"
              autocomplete="off"
              placeholder="请输入项目经理账号"
            />
          </el-form-item>
          <el-form-item label="项目经理密码" prop="pasThr" class="accinp">
            <el-input
              v-model="itemData.pasThr"
              autocomplete="off"
              placeholder="请输入项目经理密码"
            />
          </el-form-item>
        </div>
        <el-form-item label="个人社保基数" prop="gr_security">
          <el-input
            v-model="itemData.gr_security"
            autocomplete="off"
            type="number"
          />
        </el-form-item>
        <el-form-item label="单位社保基数" prop="dw_security">
          <el-input
            v-model="itemData.dw_security"
            autocomplete="off"
            type="number"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="addbtn"> 确认 </el-button>
          <el-button @click="dialogFormVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- -----------------------------------编辑弹窗-------------------------------------- -->
    <el-dialog
      v-model="editmodel"
      title="编辑项目"
      :close-on-click-modal="false"
    >
      <el-form
        :model="editdata"
        label-position="right"
        label-width="120px"
        :rules="rules"
        ref="ruleFormRefs"
      >
        <el-form-item label="项目所属公司">
          <el-select
            v-model="editdata.companyid"
            placeholder="请选择项目所属公司"
            style="width: 100%"
            prop="account"
            disabled
          >
            <el-option
              v-for="item in companylist"
              :key="item.id"
              :label="item.account"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="项目名称" prop="title">
          <el-input
            v-model="editdata.title"
            autocomplete="off"
            placeholder="请输入项目名称,例:人力资源项目-A"
          />
        </el-form-item>

        <el-form-item label="项目地址" prop="address">
          <el-input
            v-model="editdata.address"
            autocomplete="off"
            placeholder="请输入项目地址"
          />
        </el-form-item>

        <el-form-item label="项目周期" prop="time">
          <el-date-picker
            v-model="editdata.time"
            type="daterange"
            range-separator="-"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <div class="accountbox">
          <el-form-item label="操作员账号" prop="accOne" class="accinp">
            <el-input
              v-model="editdata.accOne"
              autocomplete="off"
              placeholder="请输入操作员账号"
            />
          </el-form-item>
          <el-form-item label="操作员密码" class="accinp">
            <el-input
              v-model="editdata.pasOne"
              autocomplete="off"
              placeholder="请输入操作员密码"
            />
          </el-form-item>
          <el-form-item label="项目会计账号" prop="accTwo" class="accinp">
            <el-input
              v-model="editdata.accTwo"
              autocomplete="off"
              placeholder="请输入项目会计账号"
            />
          </el-form-item>
          <el-form-item label="项目会计密码" class="accinp">
            <el-input
              v-model="editdata.pasTwo"
              autocomplete="off"
              placeholder="请输入项目会计密码"
            />
          </el-form-item>
          <el-form-item label="项目经理账号" prop="accThr" class="accinp">
            <el-input
              v-model="editdata.accThr"
              autocomplete="off"
              placeholder="请输入项目经理账号"
            />
          </el-form-item>
          <el-form-item label="项目经理密码" class="accinp">
            <el-input
              v-model="editdata.pasThr"
              autocomplete="off"
              placeholder="请输入项目经理密码"
            />
          </el-form-item>
        </div>
        <el-form-item label="个人社保基数" prop="gr_security">
          <el-input
            v-model="editdata.gr_security"
            autocomplete="off"
            type="number"
          />
        </el-form-item>
        <el-form-item label="单位社保基数" prop="dw_security">
          <el-input
            v-model="editdata.dw_security"
            autocomplete="off"
            type="number"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="editsure"> 确认 </el-button>
          <el-button @click="editmodel = false">取消</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 删除确认弹窗 -->
    <el-dialog
      v-model="centerDialogVisible"
      title="提示"
      width="20%"
      align-center
    >
      <span style="display: flex"
        ><img class="jinggao" src="../../assets/img/jianggao.png" /> 确认下架
        {{ itemName }} ?</span
      >
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="delsure"> 下架 </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 下架项目弹窗 -->
    <el-dialog v-model="dialogTableVisible" title="项目回收站" width="70%">
      <div class="searchbox">
        <div>
          <el-input
            style="width: 240px; margin-right: 20px"
            v-model="Reinput"
            placeholder="请输入项目名称"
            :suffix-icon="Search"
            @input="Researchinp"
          />
          <el-button @click="Rechongzhi">重置</el-button>
        </div>
      </div>
      <el-table
        :data="
          gridData.slice(
            (currentPages - 1) * pageSizes,
            currentPages * pageSizes
          )
        "
        :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }"
        border
        align-center
        max-height="300"
        v-loading="reloading"
      >
        <el-table-column property="id" label="序号" width="80" />
        <el-table-column property="title" label="项目名称" width="180" />
        <el-table-column property="companyid" label="公司标识" />
        <el-table-column property="account" label="公司名称" />

        <el-table-column property="address" label="项目地址" />
        <el-table-column property="start_time" label="开始时间" />
        <el-table-column property="end_time" label="结束时间" />
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button type="primary" @click="operate(scope.row.id)">
              恢复
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pageBox">
        <el-pagination
          v-model:current-page="currentPages"
          v-model:page-size="pageSizes"
          :page-sizes="[10, 20, 30, 50]"
          :small="smalls"
          :disabled="disableds"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableDatalens"
          @size-change="handleSizeChanges"
          @current-change="handleCurrentChanges"
        />
      </div>
    </el-dialog>
    <!-- 恢复确认弹窗 -->
    <el-dialog v-model="reshow" title="提示" width="20%" align-center>
      <span style="display: flex"
        ><img class="jinggao" src="../../assets/img/jianggao.png" /> 确认恢复
        {{ reName }} ?</span
      >
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="reshow = false">取消</el-button>
          <el-button type="primary" @click="resure"> 恢复 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
defineOptions({
  // name 作为一种规范最好必须写上并且和路由的name保持一致
  name: "Item"
});
import { ref, reactive } from "vue";
import {
  itemList,
  showinfo,
  addItem,
  delItem,
  backItem,
  otherItem,
  compList
} from "@/api/item";
import { ElMessage } from "element-plus";
import { Search } from "@element-plus/icons-vue";
import { ElNotification } from "element-plus";
import { log } from "node:console";
// -------------------项目信息列表请求/渲染---------------------
const tableData = ref([]);
const companylist = ref([]);
responseData();
companyLists();
function responseData() {
  new Promise((resolve, reject) => {
    itemList({ status: 0 })
      .then(res => {
        console.log(JSON.parse(res));
        tableData.value = JSON.parse(res).data;
        tableDatalen.value = tableData.value.length;
      })
      .catch(error => {
        reject(error);
      });
  });
}

// 分页组件参数
const currentPage = ref<any>(1);
const pageSize = ref(10);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const tableDatalen = ref();
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
// 分页组件参数2
const currentPages = ref<any>(1);
const pageSizes = ref(10);
const smalls = ref(false);
const disableds = ref(false);
const tableDatalens = ref(0);
const handleSizeChanges = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChanges = (val: number) => {
  console.log(`current page: ${val}`);
};
// ----------------------------------模糊搜索----------------------------------------
const loading = ref(false);
const mneuName = ref("");
let searchinp = () => {
  let datas = tableData.value;
  tableData.value = datas.filter(function (item) {
    if (String(item.title).indexOf(String(mneuName.value)) > -1) {
      loading.value = true;
      setTimeout(() => {
        loading.value = false;
      }, 1200);
      return item;
    } else {
      loading.value = true;
      setTimeout(() => {
        loading.value = false;
      }, 1200);
      tableData.value = [];
    }
  });
};
// 重置按钮
let chongzhi = () => {
  mneuName.value = "";
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
  }, 400);
  responseData();
};
// ----------------------------新增弹窗--------------------------------
// 添加验证规则
const ruleFormRef = ref(null);
const rules = ref<any>({
  accounts: [{ required: true, message: "请选择公司", trigger: "change" }],
  title: [{ required: true, message: "请输入项目", trigger: "blur" }],
  address: [{ required: true, message: "请输入项目地址", trigger: "blur" }],
  time: [{ required: true, message: "请选择项目周期", trigger: "change" }],
  accOne: [{ required: true, message: "请输入操作员账号", trigger: "blur" }],
  pasOne: [{ required: true, message: "请输入操作员密码", trigger: "blur" }],
  accTwo: [
    {
      required: true,
      message: "请输入请输入项目会计账号姓名",
      trigger: "blur"
    }
  ],
  pasTwo: [{ required: true, message: "请输入项目会计密码", trigger: "blur" }],
  accThr: [{ required: true, message: "请输入项目经理账号", trigger: "blur" }],
  pasThr: [{ required: true, message: "请输入项目经理密码", trigger: "blur" }],
  gr_security: [
    { required: true, message: "请输入个人社保基数", trigger: "blur" }
  ],
  dw_security: [
    { required: true, message: "请输入单位社保基数", trigger: "blur" }
  ]
});
const dialogFormVisible = ref(false);
let addon = () => {
  dialogFormVisible.value = true;
};

function companyLists() {
  new Promise((resolve, reject) => {
    compList()
      .then(res => {
        console.log(JSON.parse(res));
        let list = JSON.parse(res).data;
        list.forEach(element => {
          companylist.value.push({ id: element.id, account: element.account });
        });
        console.log(companylist.value);
      })
      .catch(error => {
        reject(error);
      });
  });
}
const addstartime = ref();
const addendtime = ref();
const itemData = <any>reactive({
  companyid: "",
  title: "",
  address: "",
  time: "",
  dw_security: 0,
  gr_security: 0,
  accOne: "",
  accTwo: "",
  accThr: "",
  pasOne: "",
  pasTwo: "",
  pasThr: ""
});
let addbtn = () => {
  console.log(itemData.time);
  let starTime = new Date(itemData.time[0]);
  let endTime = new Date(itemData.time[1]);
  console.log(starTime);
  console.log(endTime);
  let year = starTime.getFullYear(); // 年
  let month = <any>starTime.getMonth() + 1; // 月
  let day = <any>starTime.getDate(); // 日
  if (month >= 1 && month <= 9) {
    month = "0" + month;
  }
  addstartime.value = `${year}-${month}-${day}`;
  console.log(addstartime.value);
  if (addstartime.value == "1970-01") {
    addstartime.value = "";
  }

  let years = endTime.getFullYear(); // 年
  let months = <any>endTime.getMonth() + 1; // 月
  let days = <any>endTime.getDate(); // 日
  if (months >= 1 && months <= 9) {
    months = "0" + months;
  }
  addendtime.value = `${years}-${months}-${days}`;
  console.log(addendtime.value);
  if (addendtime.value == "1970-01") {
    addendtime.value = "";
  }

  ruleFormRef.value.validate(valid => {
    console.log(valid);
    // 不通过校验
    if (!valid) return ElMessage.error("请将内容填写完成后 再进行添加操作!");
    let addobj = {
      companyid: itemData.companyid,
      title: itemData.title,
      address: itemData.address,
      start_time: addstartime.value,
      end_time: addendtime.value,
      dw_security: itemData.title,
      gr_security: itemData.title,
      // id: [],
      account: [itemData.accOne, itemData.accTwo, itemData.accThr],
      password: ["", "", ""],
      project_type: [1, 2, 3]
    };
    addItem(addobj).then(res => {
      console.log(JSON.parse(res));
      if (JSON.parse(res).code == 1) {
        responseData();
        ElNotification({
          title: "Success",
          message: "添加成功",
          type: "success"
        });
        dialogFormVisible.value = false;
        loading.value = true;
        setTimeout(() => {
          loading.value = false;
        }, 800);
      } else {
        ElNotification({
          title: "Error",
          message: "操作失败",
          type: "error"
        });
      }
    });
    console.log(addobj);
  });
};

// -------------------------编辑-----------------------------
const editmodel = ref(false);
const ruleFormRefs = ref(null);
const editids = ref();
const editdata = <any>reactive({
  companyid: "",
  title: "",
  address: "",
  time: "",
  dw_security: 0,
  gr_security: 0,
  accOne: "",
  accTwo: "",
  accThr: "",
  pasOne: "",
  pasTwo: "",
  pasThr: "",
  acidOne: "",
  acidTwo: "",
  acidThr: ""
});
function clearEdit() {
  editdata.companyid = "";
  editdata.title = "";
  editdata.address = "";
  editdata.time = "";
  editdata.dw_security = 0;
  editdata.gr_security = 0;
  editdata.accOne = "";
  editdata.accTwo = "";
  editdata.accThr = "";
  editdata.pasOne = "";
  editdata.pasTwo = "";
  editdata.pasThr = "";
  editdata.acidOne = "";
  editdata.acidTwo = "";
  editdata.acidThr = "";
}
let editbox = editid => {
  console.log(editid);
  editids.value = editid;
  editmodel.value = true;
  showedit(editid);
};
let showedit = edid => {
  clearEdit();
  new Promise((resolve, reject) => {
    showinfo({ id: edid })
      .then(res => {
        console.log(JSON.parse(res));
        let info = JSON.parse(res).data;
        let acc = JSON.parse(res).account;
        editdata.companyid = info.companyid;
        editdata.title = info.title;

        editdata.address = info.address;
        editdata.time = [info.start_time, info.end_time];

        // editdata.accOne = a
        for (let item of acc) {
          if (String(item.account).indexOf("员") > -1) {
            editdata.accOne = item.account;
            editdata.acidOne = item.id;
          }
          if (String(item.account).indexOf("会计") > -1) {
            editdata.accTwo = item.account;
            editdata.acidTwo = item.id;
          }
          if (String(item.account).indexOf("经理") > -1) {
            editdata.accThr = item.account;
            editdata.acidThr = item.id;
          }
        }
        editdata.gr_security = info.gr_security;
        editdata.dw_security = info.dw_security;

        editdata.title = info.title;
        editdata.title = info.title;
      })
      .catch(error => {
        reject(error);
      });
  });
};
let editsure = () => {
  ruleFormRefs.value.validate(valid => {
    console.log(valid);
    // 不通过校验
    if (!valid) return ElMessage.error("请将内容填写完成后 再进行添加操作!");
    let editobj = {
      projectid: editids.value,
      companyid: editdata.companyid,
      title: editdata.title,
      address: editdata.address,
      start_time: editdata.time[0],
      end_time: editdata.time[1],
      dw_security: editdata.title,
      gr_security: editdata.title,
      id: [editdata.acidOne, editdata.acidTwo, editdata.acidThr],
      account: [editdata.accOne, editdata.accTwo, editdata.accThr],
      password: [editdata.pasOne, editdata.pasTwo, editdata.pasThr]
    };
    console.log(editobj);

    new Promise((resolve, reject) => {
      addItem(editobj).then(res => {
        console.log(JSON.parse(res));

        if (JSON.parse(res).code == 1) {
          responseData();
          ElNotification({
            title: "Success",
            message: "编辑成功",
            type: "success"
          });
          editmodel.value = false;
          loading.value = true;
          setTimeout(() => {
            loading.value = false;
          }, 800);
        } else {
          ElNotification({
            title: "Error",
            message: "操作失败",
            type: "error"
          });
        }
      });
    });
  });
};
// ------------------------------删除项目--------------------------------
const centerDialogVisible = ref(false);
const delid = ref();
const itemName = ref();
let delbox = (deid, name) => {
  delid.value = deid;
  centerDialogVisible.value = true;
  console.log(delid.value);
  itemName.value = name;
};
let delsure = () => {
  if (delid.value != 1) {
    new Promise((resolve, reject) => {
      delItem({ id: delid.value }).then(res => {
        console.log(JSON.parse(res));
        if (JSON.parse(res).code == 1) {
          responseData();
          ElNotification({
            title: "Success",
            message: "操作成功",
            type: "success"
          });
          centerDialogVisible.value = false;
          loading.value = true;
          setTimeout(() => {
            loading.value = false;
            reResponse();
          }, 800);
        } else {
          ElNotification({
            title: "Error",
            message: "操作失败",
            type: "error"
          });
        }
      });
    });
  } else {
    ElNotification({
      title: "Error",
      message: "禁止下架!",
      type: "error"
    });
  }
};
// ------------------------------下架项目---------------------------------
reResponse();
function reResponse() {
  new Promise((resolve, reject) => {
    itemList({ status: 1 })
      .then(res => {
        console.log(JSON.parse(res));
        gridData.value = JSON.parse(res).data;
        tableDatalens.value = gridData.value.length;
      })
      .catch(error => {
        reject(error);
      });
  });
}
const reName = ref("");
const dialogTableVisible = ref(false);
const gridData = ref([]);
const Reinput = ref();
let recycle = () => {
  dialogTableVisible.value = true;
  reResponse();
};
const reloading = ref(false);
let Researchinp = () => {
  gridData.value = gridData.value.filter(item => {
    if (String(item.title).indexOf(String(Reinput.value)) > -1) {
      reloading.value = true;
      setTimeout(() => {
        reloading.value = false;
      }, 1200);
      return item;
    } else {
      reloading.value = true;
      setTimeout(() => {
        reloading.value = false;
      }, 1200);
      gridData.value = [];
    }
  });
};

let Rechongzhi = () => {
  reloading.value = true;
  setTimeout(() => {
    reloading.value = false;
  }, 1200);
  reResponse();
};
const reidd = ref();
const reshow = ref(false);
// 恢复按钮
let operate = reid => {
  console.log(reid);
  reidd.value = reid;
  reshow.value = true;
  gridData.value.forEach(element => {
    if (reid == element.id) {
      reName.value = element.title
      return;
    }
  });
  
};

let resure = () => {
  new Promise((resolve, reject) => {
    backItem({ id: reidd.value }).then(res => {
      console.log(JSON.parse(res));
      if (JSON.parse(res).code == 1) {
        responseData();
        ElNotification({
          title: "Success",
          message: "操作成功",
          type: "success"
        });
        reshow.value = false;
        dialogTableVisible.value = false;
        loading.value = true;
        setTimeout(() => {
          loading.value = false;
          reResponse();
        }, 800);
      } else {
        ElNotification({
          title: "Error",
          message: "操作失败",
          type: "error"
        });
      }
    }).catch(error => {
      reject(error);
    });
  });
};
</script>

<style lang="scss" scoped>
h1 {
  font-weight: 400;
}
.pagebg {
  width: auto;
  background-color: #ffffff;
}
.searchbox {
  width: auto;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.btnStyle {
  position: relative;
}
.pageBox {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.accountbox {
  width: 70%;
  display: flex;
  flex-wrap: wrap;
}
.accinp {
  width: 50%;
}
.jinggao {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}
</style>
